<template>
    <div class="MySign">
        <!--        面包导航-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>签到管理</el-breadcrumb-item>
            <el-breadcrumb-item>签到记录</el-breadcrumb-item>
        </el-breadcrumb>
        <!--        卡片-->
        <el-card class="box-card">

            <!--            表格区域-->
            <el-table :data="signList" border>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="楼栋名称" prop="bname"></el-table-column>
                <el-table-column label="寝室号" prop="qname"></el-table-column>
                <el-table-column label="学院" prop="cname"></el-table-column>
                <el-table-column label="班级" prop="classname"></el-table-column>
                <el-table-column label="时间" prop="createDate"></el-table-column>
                <el-table-column label="备注" prop="ucodes" >
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.ucodes ===0" >{{scope.row.note}}</el-tag>
                        <el-tag type="success" v-else-if="scope.row.ucodes ===1">未签到</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <!--                分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.page"
                    :page-sizes="[5,10,20,50]"
                    :page-size="queryInfo.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "MySign",
        data(){
            return{
                //列表
                signList: [],
                total: 0,
                queryInfo:{
                    page: 1,
                    size: 10,
                    ucodes: '',
                    createDate: '',
                    id: ''
                },
                //选择框
                buildingList: [
                    {
                        id: 0,
                        lable: '未签到'
                    },
                    {
                        id: 1,
                        lable: '其他'
                    }
                ],
            }
        },
        created() {
            this.getSignList()
        },
        methods: {
            async getSignList() {
                this.queryInfo.id = window.sessionStorage.getItem('id')
                const {data: res} = await this.$http.get('Sign/getAllNoSign', {
                    params: this.queryInfo
                })
                if (res.code !== 200) return this.$message.error(res.message)
                this.signList = res.data.data
                this.total = res.data.total
            },
            //监听pagesize的改变
            handleSizeChange(newSize) {
                this.queryInfo.size = newSize
                this.getSignList()
            },
            //页码值改变
            handleCurrentChange(newPage) {
                this.queryInfo.page = newPage
                this.getSignList()
            },
            //搜索
            async search() {
                if (this.queryInfo.createDate !== '') {
                    this.queryInfo.createDate = this.dateFormat(this.queryInfo.createDate)
                }
                const {data: res} = await this.$http.get('Sign/getAllNoSign', {
                    params: this.queryInfo
                })
                if (res.code !== 200) return this.$message.error(res.message)
                this.signList = res.data.data
                this.total = res.data.total
                console.log(res)
            },
            //日期转换
            dateFormat(dateData) {
                var date = new Date(dateData)
                var y = date.getFullYear()
                var m = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d = date.getDate()
                d = d < 10 ? ('0' + d) : d
                const time = y + '-' + m + '-' + d
                return time
            },
        }
    }
</script>

<style scoped>

</style>